<template>
    <div class="Head">
        <div class="l-content">
            <img src="../../assets/img/jgc.png" v-if="lang == '0' || lang == '1'" />
            <img src="../../assets/img/jgc_en.png" v-else />
            <span>A-MIS Ver.7 for Web</span>
        </div>
        <div class="r-content">
            <!-- <div class="type-style" v-if="!TypeStatus"></div> -->
            <!-- <div class="d3-lay" v-if="show3DBtn">
                <i
                    @click="on3dClick"
                    :class="is3dAble ? 'iconfont' : 'iconfont disable'"
                    >&#xe8e6;</i
                >
            </div> -->

            <el-radio-group v-model="allData.nowKey" @change="onOptTypeRadioChange" class="radio-lay" size="mini"
                :disabled="disabled || localSelectRadio == -1">
                <el-radio v-for="(item, index) in allData.labList" :label="item.key" :key="item.key">
                    {{ item.label }}
                </el-radio>
                <!-- <el-radio :label="0">{{
                    $t("message.cadViewer.optTypeStr.commonSign")
                }}</el-radio>
                <el-radio :label="1">{{
                    $t("message.cadViewer.optTypeStr.ballSign")
                }}</el-radio>
                <el-radio :label="2">{{
                    $t("message.cadViewer.optTypeStr.visualBallSign")
                }}</el-radio> -->
            </el-radio-group>

            <el-dropdown>
                <div class="head-portrait">
                    <i class="el-icon-user"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        {{ userName }}
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="userConfigFlag = true">
                        {{ $t("message.logout_setting") }}
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="logout">
                        {{ $t("message.public.out") }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <div class="nowTime">{{ nowTime }}</div>
            <i class="el-icon-full-screen" @click="handleFullScreen"></i>
        </div>
        <userConfig v-if="userConfigFlag" @CloseConfigDialog="userConfigFlag = false"></userConfig>
    </div>
</template>

<script>
import { deLcalStorage, getLocalStorage } from "@/utils/storage";
import userConfig from "../ConfigDialog/ConfigDialog";
import { getViewStyleRadioLab, setViewStyleRadioLab } from "@/api/api.js";
// 导出模块
export default {
    // 模块名字
    name: "Head",
    props: {
        disabled: {
            type: Boolean,
            default: false,
        },
        selectRadio: {
            type: Number,
            default: -1,
        },

        show3DBtn: {
            type: Boolean,
            default: false,
        },

        is3dAble: {
            type: Boolean,
            default: false,
        },
    },

    // 模块数据
    data() {
        //数据
        return {
            nowTime: "",
            exitFullscreen: false,
            fullscreen: false,
            userConfigFlag: false,
            userName: getLocalStorage("userName"),
            TypeStatus: true,
            lang: getLocalStorage("lang"),

            localSelectRadio: -1,

            selectRadioTest: -1,

            allData: {},
        };
    },
    // 注册组件
    components: {
        userConfig,
    },
    // 监听指定值，只有指定值变化，才会触发
    watch: {
        selectRadio(nVal) {
            this.localSelectRadio = this.selectRadio;
        },
    },
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        timeFormate(timeStamp) {
            let year = new Date(timeStamp).getFullYear();
            let month =
                new Date(timeStamp).getMonth() + 1 < 10
                    ? "0" + (new Date(timeStamp).getMonth() + 1)
                    : new Date(timeStamp).getMonth() + 1;
            let date =
                new Date(timeStamp).getDate() < 10
                    ? "0" + new Date(timeStamp).getDate()
                    : new Date(timeStamp).getDate();
            let hh =
                new Date(timeStamp).getHours() < 10
                    ? "0" + new Date(timeStamp).getHours()
                    : new Date(timeStamp).getHours();
            let mm =
                new Date(timeStamp).getMinutes() < 10
                    ? "0" + new Date(timeStamp).getMinutes()
                    : new Date(timeStamp).getMinutes();
            let ss =
                new Date(timeStamp).getSeconds() < 10
                    ? "0" + new Date(timeStamp).getSeconds()
                    : new Date(timeStamp).getSeconds();
            this.nowTime =
                year +
                "-" +
                month +
                "-" +
                date +
                "" +
                " " +
                hh +
                ":" +
                mm +
                ":" +
                ss;
        },
        nowTimes() {
            this.timeFormate(new Date());
            setInterval(this.nowTimes, 1000);
            this.clear();
        },
        clear() {
            clearInterval(this.nowTimes);
            this.nowTimes = null;
        },
        handleFullScreen() {
            let element = document.documentElement;

            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
            this.fullscreen = !this.fullscreen;
        },
        logout() {
            this.$router.push("/");
            deLcalStorage("activeClass");
            deLcalStorage("accType");
            deLcalStorage("token");
            sessionStorage.token = null;
        },

        /**
         * 编辑模式更改
         * 0 普通标记
         * 1 球标
         * 2 ？
         */
        onOptTypeRadioChange(e) {
            console.log(e);
            console.log(this.allData.nowKey);
            // this.$emit("change", e);
            //     console.log("onOptTypeRadioChange");
            //     console.log(e);
            //     if (e == 1 || e == 2) {
            //     }
            this.setViewStyleRadioLabFn();
            this.$emit('changeRadio', e)
        },

        on3dClick() {
            if (this.is3dAble) this.$emit("on3dClick");
        },
        async setViewStyleRadioLabFn() {
            let dataJson = {
                Account: getLocalStorage('userName'),
                Key: this.allData.nowKey
            }
            let res = await setViewStyleRadioLab(dataJson);
            // this.allData = res.data.data;
        },
        async getViewStyleRadioLabFn() {
            let res = await getViewStyleRadioLab({ Account: getLocalStorage('userName') });
            this.allData = res.data.data;
        }
    },
    // 创建前状态(里面是操作)
    beforeCreate() { },
    // 创建完毕状态(里面是操作)
    created() {
        this.localSelectRadio = this.selectRadio;
    },
    // 挂载前状态(里面是操作)
    beforeMount() {
        this.getViewStyleRadioLabFn();
    },
    // 挂载结束状态(里面是操作)
    mounted() {
        this.nowTimes();
        // 后台推送
        // let _this = this
        // this.$socket.on("ChangeCodeToolsState", function (status) {
        //   _this.TypeStatus = status
        // });
        // this.$socket.start();
    },
    // 更新前状态(里面是操作)
    beforeUpdate() { },
    // 更新完成状态(里面是操作)
    updated() { },
    // 销毁前状态(里面是操作)
    beforeDestroy() { },
    // 销毁完成状态(里面是操作)
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.Head {
    // width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #213d49;
    box-shadow: inset 0px 1px 4px 0px rgba(0, 21, 41, 0.12);

    .l-content {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 40px;

        span {
            font-weight: 500;
            color: rgba(242, 244, 244, 0.9);
            font-size: 16px;
            margin: 0 6px;
            font-weight: bold;
        }
    }

    .r-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 16px;

        @keyframes Tada {
            0% {
                box-shadow: none;
            }

            100% {
                box-shadow: 0 0 1px rgba(254, 252, 124, 1),
                    0 0 3px rgba(255, 217, 54, 0.7), 0 0 5px rgba(255, 0, 0, 1),
                    0 0 14px rgba(255, 0, 0, 1), 0 0 17px rgba(255, 0, 0, 1),
                    0 0 20px rgba(255, 0, 0, 1), 0 5px 25px rgba(0, 0, 255, 0.9);
            }
        }

        .type-style {
            width: 12px;
            height: 12px;
            background: rgba(255, 0, 0, 1);
            border-radius: 50%;
            margin: 0 8px;
            animation: Tada 1s 2s both infinite;
        }

        .head-portrait {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(212, 215, 217, 1);
            text-align: center;
            line-height: 24px;
            cursor: pointer;

            .el-icon-user {
                font-size: 20px;
            }
        }

        .radio-lay {
            // margin: 0 20px;
            // border-radius: 2px;
            // border: 1px solid #d9d9d9;
            // background-color: #fff;
            // padding: 3px 20px;
            width: 380px;
            height: 26px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #d9d9d9;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 24px;
        }

        .nowTime {
            color: rgba(255, 255, 255, 0.65);
            font-size: 14px;
            margin: 0 8px;
        }

        .el-icon-full-screen {
            font-size: 16px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.65);
        }

        .d3-lay {
            margin-right: 10px;

            .iconfont {
                font-size: 18px;
                color: #106ebe;
                cursor: pointer;
                padding: 2px 5px;

                background: #ffffff;
                border-radius: 2px;
                border: 1px solid #d9d9d9;
            }

            .disable {
                color: #606266;
            }
        }
    }
}

::v-deep .el-dropdown-menu__item:focus,
::v-deep .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #ffccc7;
    color: #606266;
}
</style>
